<template>
  <div>
    <div :class="addSta ? 'job-filtrate-list' :'job-filtrate-list job-filtrate-listed'">
      <el-row>
        <el-col :span="2" class="filtrate-list-title">{{title}}</el-col>
        <el-col :span="19" class="filtrate-button-text">
          <el-button :class="activeindex == 0 ? 'button-checked' : ''" @click="doClick(0)">不限</el-button>
          <el-button
            v-if="type == 0"
            v-for="item in data"
            :key="item.id"
            @click="doClick(item.id)"
            :class="activeindex == item.id ? 'button-checked' : ''"
          >{{item.content}}</el-button>
          <el-button
            v-if="type ==1"
            v-for="item in data"
            :key="item.licenseTypeId"
            @click="doSecondClick(item.licenseTypeId)"
            :class="activeindex == item.licenseTypeId ? 'license-checked' :''"
          >
            {{item.licenseType}}
            <!-- 1234567 -->
            <i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
        </el-col>
        <el-col @click.native="doMore" :span="2" :offset="1" class="filtrate-list-more">
          更多
          <i v-if="addSta" class="el-icon-arrow-right"></i>
          <i v-if="!addSta" class="el-icon-arrow-down"></i>
        </el-col>
      </el-row>
    </div>
    <el-row v-if="type==1 && secondIndex != -1 && secondSta" class="second-license">
      <el-button
        type="text"
        :class="secondIndex == item.licenseTypeId ? 'second-button second-button-checked' :'second-button'"
        v-for="item in secondLicense"
        :key="item.licenseTypeId"
        @click="doSecondClicks(item.licenseTypeId)"
      >{{item.licenseType}}</el-button>
    </el-row>
  </div>
</template>

<script>
export default {
  props: ['title', 'data', 'type'],
  data() {
    return {
      activeindex: 0,
      secondIndex: -1,
      addSta: true,
      secondLicense: [],
      secondSta: true,
      secondStaIndex: -1
    }
  },
  methods: {
    doClick(id) {
      this.activeindex = id
      this.$emit('input', id)
      this.secondIndex = -1
      this.$parent.doSearch()
      //  console.log(1)
    },
    doMore() {
      this.addSta = !this.addSta
    },
    doSecondClick(id) {
      console.log(id)
      if (this.secondStaIndex == id) {
        this.secondSta = !this.secondSta
      } else {
        this.secondSta = true
      }
      this.secondStaIndex = id
      this.activeindex = id
      this.secondIndex = id
      this.data.forEach(item => {
        if (item.licenseTypeId == id) {
          this.secondLicense = item.licenseSonList
        }
      })
      // console.log(this.secondLicense)
      this.doSecondClicks(0)
    },
    doSecondClicks(id) {
      this.secondIndex = id
      this.$emit('input', id)
      this.$parent.doSearch()
      //  console.log(3)
    }
  },
  mounted() {},

  components: {}
}
</script>

<style lang="scss" scoped>
.license-checked {
  color: #f09338 !important;
}
.second-license {
  margin: 10px 30px;
  padding: 19px 0;
  width: 840px;
  height: auto;
  background: #f7f7f7;
  border-radius: 5px;
  .second-button {
    margin: 0 0 0 30px;
    padding: 7px 5px;
    font-size: 14px;
    font-weight: 400;
    color: rgba(102, 102, 102, 1);
    border-radius: 0;
  }
  .second-button-checked {
    background: #f09338;
    color: #fff;
  }
}
</style>
